<template>
  <div>
    权限
    <div>
      <el-checkbox v-model="isToggle" @change="isTogglechange">展开/关闭</el-checkbox>
      <el-checkbox v-model="isAllChecked">全选/反选</el-checkbox>

    </div>
    <el-tree
      ref="tree"
      :data="list"
      show-checkbox
      node-key="id"
      :default-expanded-keys="defaultExpandedKeys"
      :default-checked-keys="defaultCheckedKeys"
      :props="defaultProps"
      @check="change"
      @node-expand="nodeClick"
      @node-collapse="nodeClick"
    />
    <el-form ref="form" :model="form" label-width="130px" :inline="false" size="mini">
      <el-form-item label="菜单类型">
        <el-radio v-model="form.type" :label="0">顶级目录</el-radio>
        <el-radio v-model="form.type" :label="1">菜单</el-radio>
        <el-radio v-model="form.type" :label="2">按钮</el-radio>

      </el-form-item>
      <el-form-item v-if="form.type !=0" label="上级菜单">
        <el-cascader
          v-model="form.pid"
          :options="list"
          :props="{ checkStrictly: true,label:'title',children:'children',value:'id' }"
          clearable
        />
      </el-form-item>
      <el-form-item label="路由名称">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="路径">
        <el-input v-model="form.path" />
      </el-form-item>
      <el-form-item label="组建路径">
        <el-input v-model="form.component" />
      </el-form-item>
      <el-form-item label="排序">
        <el-input v-model="form.sort" />
      </el-form-item>
      <el-form-item label="是否隐藏">
        <el-radio v-model="form.hidden" :label="0">否</el-radio>
        <el-radio v-model="form.hidden" :label="1">是</el-radio>
      </el-form-item>
      <el-form-item label="是否展开">
        <el-radio v-model="form.alwaysShow" :label="0">否</el-radio>
        <el-radio v-model="form.alwaysShow" :label="1">是</el-radio>
      </el-form-item>
      <el-form-item label="meta属性">
        <el-row v-for="item in form.meta" :gutter="20">
          <el-col :span="6" :offset="0"><el-input v-model="item.key" placeholder="meta的key" /></el-col>
          <el-col :span="6" :offset="0"> <el-input v-model="item.value" :placeholder="item.placeholder" /></el-col>
        </el-row>

      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import {
  findAllPermissions,
  save
} from '@/api/table'
export default {
  data() {
    return {
      isToggle: false,
      isAllChecked: false,
      list: [],
      defaultExpandedKeys: [],
      defaultCheckedKeys: [],
      defaultProps: {
        label: 'title',
        children: 'children'
      },
      allId: [],
      form: {
        'alwaysShow': 1,
        'children': [
        ],
        'component': '',
        'createTime': '',
        'hidden': 0,
        'icon': '',
        'id': '',
        'isDeleted': '',
        'isSelect': '',
        'level': '',
        'meta': [
          {
            key: 'title',
            value: '未命名',
            placeholder: '比如商品管理'
          },
          {
            key: 'icon',
            value: 'el-icon-menu',
            placeholder: '比如 el-icon-menu'
          }
        ],
        'modifyTime': '',
        'name': '',
        'path': '',
        'permissionValue': '',
        'pid': 0,
        'redirect': '',
        'sort': '',
        'status': '',
        'title': '',
        'type': 0
      }
    }
  },
  computed: {

  },
  watch: {
    isAllChecked(val) {
      val ? this.$refs.tree.setCheckedKeys(this.allId) : this.$refs.tree.setCheckedKeys([])
    }

  },
  created() {
    findAllPermissions()
      .then(res => {
        console.log(res)
        this.mapMenus(res.data.menus)
        this.list = res.data.menus
      })
  },
  mounted() {

  },
  methods: {
    onSubmit() {
      var params = JSON.parse(JSON.stringify(this.form))
      params.level = params.type
      params.type = params.type == 0 ? 1 : params.type

      params.icon = params.meta[1].value
      params.title = params.meta[0].value
      params.meta = JSON.stringify({
        title: params.meta[0].value,
        icon: params.meta[1].value
      })
      params.pid = params.pid[params.pid.length - 1]
      save(params)
    },
    isTogglechange(val) {
      console.log(this.$refs.tree.store.nodesMap)
      var nodesMap = this.$refs.tree.store.nodesMap
      Object.keys(nodesMap).forEach(el => {
        nodesMap[el].expanded = this.isToggle
      })
    },
    nodeClick() {
      // this.$nextTick(()=>{

      // })
      setTimeout(() => {
        var nodesMap = this.$refs.tree.store.nodesMap
        this.isToggle = Object.values(nodesMap).filter(ele => ele.expanded).length == this.allId.length
      }, 0)
    },
    change(val, val1) {
      console.log(val, val1)
      this.isAllChecked = val1.checkedKeys.length == this.allId.length
    },
    mapMenus(arr) {
      if (!Array.isArray(arr)) {
        this.$message.error('该数据不是数组')
        return
      }
      arr.forEach(ele => {
        this.allId.push(ele.id)
        if (ele.type == 2) {
          ele.disabled = true
          delete ele.children
        } else {
          this.mapMenus(ele.children)
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
